<template>
	<view class="content">
		<image class="bg-img" src="../../static/index/img3.jpg"></image>
	</view>
	<view class="big">
		<view>&nbsp</view>
		<text class="title">{{this.Title}}</text>
		<view class="body" v-for="(item,index) in this.Question" :key="index">

			<view>
				<view>&nbsp</view>
				<span class="Question">{{item.questionnaireQuestion}}</span>
				<view>&nbsp</view>

				<!-- 单选 -->
				<view class="one" v-if="item.questionnaireOptionType=='radio'">
					<radio-group @change="chan">
						<label v-for="(item,index) in Options[index] " :key="item" style="margin-right: 20rpu;">
							<radio :value="item" :checked="item==radioValue" />{{item}}
						</label>
					</radio-group>
				</view>

				<!-- 多选 -->
				<view class="one" v-if="item.questionnaireOptionType=='checkbox'">
					<checkbox-group @change="chan">
						<label v-for="(item,index) in Options[index] " :key="item" style="margin-right: 20rpu;">
							<checkbox :value="item" :checked="item==radioValue" />{{item}}
						</label>
					</checkbox-group>
				</view>

				<!-- 输入 -->
				<view v-if="item.questionnaireOptionType=='input'" class="text">
					<input class="input" placeholder="请输入" @input="chan($event)" />

				</view>
			</view>

			<view>&nbsp</view>
		</view>
		<view>&nbsp</view>
		<view class="bigbutton">
			<button class="button" @tap="post()">提交</button>
		</view>
		<view>&nbsp</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: '0',
				Title: [],
				Question: [],
				id: '',
				optionValue: '',
				Options: [],
				text: []
			}
		},
		onLoad: function(option) {
			this.id = option.id
			console.log(option.id);
			console.log(this.id);
		},
		mounted() {
			this.getQuestion()
			this.chan()
		},
		methods: {
			chan(e) {
				this.optionValue = e;
				console.log(this.optionValue);
			},
			getQuestion() {
				uni.request({
					url: `https://backendth.flymi.top/questionnaire/${this.id}`,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res)
						this.Question = res.data.data;
						console.log(this.Question)
						this.Question.forEach((item) => {
							this.Title = item.questionnaireTitle;
							this.Options.push(item.optionName.split(','));
						})
						console.log(this.Title)
						console.log(this.Options)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			post() {
				uni.showToast({
					title: '提交成功！',
				});
				setTimeout(() => {
					uni.navigateBack({
						delta:1
					})
				}, 650)

				// uni.request({
				// 	url: 'https://backendth.flymi.top/questionnaireres',
				// 	method: 'POST',
				// 	data: {
				// 		QuestionnaireId: 1,
				// 		QuestionnaireQuestionId: 1,
				// 		OptionId: 1,
				// 		optionValue: 1
				// 	},
				// 	header: {
				// 		'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data);
				// 	}
				// });
			}


		}
	}
</script>

<style>
	.text {
		width: 100%;
		height: 80upx;
		background: bisque;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		opacity: 0.9;
	}

	.text .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.big {
		background: #fff;
		margin-top: 10px;
		border-radius: 10px;
		margin-left: 5px;
		margin-right: 5px;
		background-color: rgba(255, 255, 255, 0.91);
	}

	.title {
		font-size: 20px;
		font-weight: 900;
		color: black;
		margin-left: 4vw;
	}

	.Question {
		margin-left: 10px;
	}

	.body {
		background: #fff;
		margin-top: 20px;
		border-radius: 5px;
		margin-left: 5px;
		margin-right: 5px;
		background-color: rgba(255, 255, 255);
	}

	.one {
		margin-left: 5px;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.button {
		width: 25vw;
		margin-left: 70vw;
		opacity: 0.8;
	}
</style>
